{{>head}}

<div id="makeRequests">	
	<div id="tabsHolder">
		<div data-filter="all" class="tab selected">All</div>
		<div data-filter="classNewest" class="tab">Latest</div>
		<div data-filter="reward_item" class="tab">Items</div>
		<div data-filter="reward_loot" class="tab">Loot</div>
		<div data-filter="reward_xp" class="tab forOthers">Others (XP)</div>
		<div data-filter="reward_coins" class="tab forOthers">Others (Coins)</div>
		<div data-filter="reward_goods" class="tab forOthers">Others (Goods)</div>
		<div data-filter="reward_energy" class="tab forOthers">Others (Energy)</div>
	</div>
	<div style="margin: 7px 0; ">
		<input type="button" class="button" value="Uncheck All" id="btnUncheckAll" />
		<label style="margin-left: 10px">Search: <input type="text" id="searchQ" value="" /></label>
		<span id="searchCount"></span>
		<input type="button" class="button iconSearch" id="btnSearch" />
		<input type="button" class="button" value="Save Requests" id="btnSave" />
	</div>
	
	
	<table id="tblHead" class="defTable">
		<colgroup>
			<col width="30" />
			<col width="30" />
			<col />
			<col width="100"/>
			<col width="60" span="3"/>
		</colgroup>
		<thead>
			<tr>
				<th>&nbsp;</th>
				<th>&nbsp;</th>
				<th align="left">id</th>
				<th>you get</th>
				<th>till reset</th>
				<th>valid for</th>
				<th>helpers</th>
			</tr>
		</thead>
	</table>
	<div style="clear:both"></div>
</div>


<div style="height: 100px"></div>

<div id="pleaseWait">Please Wait...</div>

<table id="tblVirals" class="defTable">
	<colgroup>
		<col width="30" />
		<col width="30" />
		<col />
		<col width="100"/>
		<col width="60" span="3"/>
	</colgroup>
	<tbody>
	{{#arVirals}}
		<tr data-otherget="{{helperRewardsType}}" class="{{classNewest}} {{hostRewardsType}}">
			<td><input type="checkbox" value="{{id}}" {{#isChecked}}checked{{/isChecked}} /></td>
			<td>
				{{#showImages}}
				<img src="templates/images/blank.gif" class="imgIcon" data-src="{{imPath}}" width="30" height="30" />
				{{/showImages}}
				{{^showImages}}&nbsp;{{/showImages}}
			</td>
			<td style="text-align: left">{{id}}</td>
			<td>{{displayReward}}</td>
			<td>{{timeTillReset}}</td>
			<td>{{rewardexpirationTime}}</td>
			<td>{{rewardmaxHelpers}}</td>
			
		</tr>
	{{/arVirals}}
	</tbody>
</table>
<div id="debug2"></div>

<script type="text/javascript">
	$(function(){
		
		$("#pleaseWait").hide();
		
		var $tbl = $("#tblVirals tbody:first");
		var $colImages = $("tr>td:nth-child(2)>img", $tbl);
		var tmrImages = null;
		
		$("#tabsHolder .tab").click(function(e){
			$("#tabsHolder .selected").removeClass("selected");

			var $e = $(e.currentTarget);
			$e.addClass("selected");

			$("#pleaseWait").show();
			$tbl.hide();
			setTimeout( 

				function()
				{
					var filter = $e.attr("data-filter");
		
					if (filter=="all")
					{
						$tbl.find("tr").show();
					} else {
		
						//mode
						var forOthers = $e.hasClass("forOthers");
						
						$("tr", $tbl).each(function(i,el)
						{
							var $el = $(el);
		
							if (forOthers)
							{
								if ($el.attr("data-otherget")==filter) $el.show();
								else $el.hide();
							} else {
								if ($el.hasClass(filter)) $el.show();
								else $el.hide();
							};
							$el = undefined;
						});
					}
					$(window).scrollTop(0);
					$("#pleaseWait").hide();
					$tbl.show();
				}
			,400);

			
		});
		
		$("tr>td>input[type='checkbox']", $tbl).click(function(e){ e.stopImmediatePropagation(); });
		$("tr>td", $tbl).click(function(e){
			$chk = $(e.currentTarget).parent().find("td:first input[type='checkbox']:first");
			if ($chk.is(":checked"))
				$chk.removeAttr("checked");
			else
				$chk.attr("checked","checked");
		});
		
		$("#searchQ").keydown(function(e){
			if (e.keyCode==13)
			{
				e.preventDefault();
				doSearch();
				return;
			}
			
		});
		$("#btnSearch").click(function(){ doSearch(); });

		var lastSearch = "";
		var arResults = [];
		var lastSearchIndex = 0;
		
		function doSearch()
		{
			var q = $.trim( $("#searchQ").val() );
			if (q=="")
			{
				//$("tr",$tbl).show();
				$("tr>td:nth-child(3)",$tbl).each(function(i,el){ 
					var $el = $(el);
					$el.html( $el.html().replace(/<span>(\w+)<\/span>/i, "$1") );
				});
				arResults = [];
				lastSearchIndex = 0;
				$("#searchCount").html("");
				return;
			}
			
			if (lastSearch != q)
			{
				arResults = [];
				lastSearchIndex = 0;
				lastSearch = q;
				
				//find 
				var strSearch = new RegExp(q, 'gi');
				$("tr>td:nth-child(3)", $tbl).each(function(i,el){
					var $el = $(el);
					var txt = $el.html();
					if (txt.search(strSearch)==-1)
					{
						$el.html( txt.replace(/<span>(\w+)<\/span>/i, "$1") );
						//$el.parent().hide();
					} else {
						//$el.parent().show();
						$el.html( txt.replace( new RegExp("("+q+")",'i'), "<span>$1</span>") );
						arResults.push($el);
					}
				});

			} else {
				if (lastSearchIndex+1<arResults.length)
					++lastSearchIndex;
				else
					lastSearchIndex = 0;
				
			}
			
			if (arResults.length>0)
			{
				$("#searchCount").html( "[" + (lastSearchIndex+1) + "/" + arResults.length + "] " );
				$(window).scrollTop( arResults[lastSearchIndex].position().top - 210 );
			} else {
				$("#searchCount").html("");
			}
		}

		$("#btnSave").click( saveRequests );
		function saveRequests(e)
		{
			var reqs = [];

			$(":checkbox:checked",$tbl).each(function(i,el){
				var $el = $(el);
				reqs.push($el.attr("value"));
			});

			pData = $.toJSON({arReqs:reqs});
			
			$.post("Main.php?act=saveRequests", pData, 
				function(r){
					if (r.resp)
					{
						alert("Saved\n\nAdded: " + r.added + "\nRemoved: " + r.deleted);
						return;
					}

					alert("Ooops... something went wrong");
				}
			,"json")
			.error(function(){ alert("Oooops"); });	
		}

		$("#btnUncheckAll").click(function(){
			$tbl.find(":checkbox").filter(":checked").removeAttr("checked");
		});

		$(window).scroll( function(e) {
			startTmrImages();
		}).trigger("scroll");
		
		function startTmrImages()
		{
			stopTmr();
			tmrImages = setTimeout(showImagesInViewport, 200);
		}

		function showImagesInViewport()
		{
			//get only pic in viewport
			var $w = $(window);
			var tdH = $("#tblVirals>tbody>tr>td:first").outerHeight(true);
			
			var fromTop = $w.scrollTop();
			var howMany = ($w.height() - 120)/tdH;

			//each line has like 30px height
			var startRow = Math.floor( fromTop/tdH );
			var endRow = startRow + howMany;

			//alert("StartRow:" + startRow + " endRow:" + endRow);
			
			$colImages
				.slice(startRow, endRow)
				.each(function(i,el) {
					if (el.src.indexOf('blank')!=-1)
						el.src = el.getAttribute("data-src");
					
				});
			
			
		}
		
		function stopTmr()
		{
			if (tmrImages!=null)
			{
				clearTimeout(tmrImages);
				tmrImages = null;
			}
		}
	});
</script>

{{>foot}}

